<!--
 * @Author: dengyl
 * @Date: 2022-01-14 11:07:05
 * @LastEditTime: 2022-08-17 16:44:05
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 图标展示
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\components\static-icon.vue
-->
<template>
  <div class="static-icon" ref="container">
    <ul>
      <li
        :style="widthStyle"
        @click="selectHandle(index)"
        v-for="(item, index) in dataList"
        :class="{ isSelected: currentIndex === index }"
        :key="index"
      >
        <div :title="item.name">
          <div
            v-if="item.sectionData.options.sectionTabIcon"
            class="icon"
            :style="`background-color:${item.sectionData.options.sectionTabBgColor}`"
          >
            <div :style="`background-color:${item.sectionData.options.sectionTabBgColor}`"></div>
            <Icon :icon="item.sectionData.options.sectionTabIcon" :size="20" />
          </div>
          <div class="title">{{ item.name }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  const defaultW = 150;

  export default {
    name: 'StaticIcon',
    props: {
      dataList: {
        type: Array
      },
      selectTab: {
        type: Function
      }
    },
    data() {
      return {
        widthStyle: {
          width: defaultW + 'px'
        },
        currentIndex: 0
      };
    },
    mounted() {
      this.resize();
    },
    methods: {
      /**
       * @description: 切换
       */
      selectHandle(index) {
        // this.$emit('update', index);
        this.selectTab(index);
        this.currentIndex = index;
      },
      /**
       * @description: 计算宽度
       */
      resize() {
        const len = this.dataList.length;
        // 宽度减去border
        const containerWidth = this.$refs.container.clientWidth - 2;
        if (len * defaultW < containerWidth) {
          this.widthStyle = {
            width: containerWidth / len + 'px'
          };
        }
      }
    }
  };
</script>
<style scoped lang="scss">
  $borderColor: #e1e7f0;

  .static-icon {
    > ul {
      padding: 0;
      margin: 0;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      list-style: none;
      border-bottom: 1px solid $borderColor;

      > li {
        display: inline-block;
        width: 150px;
        height: 60px;
        font-size: 12px;
        color: #666;
        cursor: pointer;

        &:first-child ~ li {
          > div {
            border-left: 1px solid $borderColor;
          }
        }

        &.isSelected,
        &:hover {
          background-color: rgba(194, 215, 235, 0.2);
        }

        > div {
          margin-top: 10px;

          > .title {
            height: 40px;
            margin-left: 50px;
            overflow: hidden;
            line-height: 40px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          > .icon {
            position: relative;
            float: left;
            width: 40px;
            height: 40px;
            margin-left: 20px;
            line-height: 46px;
            color: #fff;
            text-align: center;
            border-radius: 50%;

            > div {
              position: absolute;
              top: -2px;
              left: -2px;
              width: 44px;
              height: 44px;
              border-radius: 50%;
              opacity: 0.2;
            }
          }
        }
      }

      // 解决Chrome下的滚动条样式
      &::-webkit-scrollbar {
        /* 滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1） */
        width: 4px;
        height: 4px;
      }

      &::-webkit-scrollbar-button {
        /* 滚动条两端的按钮（位置2） */
        display: none;
      }

      &::-webkit-scrollbar-track-piece {
        /* 内层轨道，滚动条中间部分（位置4） */
        width: 8px;
        background-color: #f5f5f5;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-thumb {
        /* 滚动条里面可以拖动的那部分（位置5） */
        height: 50px;
        background: #bec7d5;
        border-radius: 6px;
      }
    }
  }
</style>
